<template>
  <div class="app-container">
    <div v-if="!isManage">
        <div class="filter-container">
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" @click="handleUpdate(null)">添加特价活动</el-button>

      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="特价名称" v-model="filters['like$goods.title']"></el-input>


      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in list" :key="item.id">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="float:left">{{item.title}}</span>
              <div style="float: right;">
                
                <el-button style=" padding: 3px 0" @click="handleUpdate(item)" type="text">修改</el-button>  
                <el-button style=" padding: 3px 0" @click="handleDelete(item)" type="text">删除</el-button>
              </div>
              
            </div>
          
            <div class="text item">
                开始时间: {{item.startTime}}
            </div>
            <div class="text item">
                结束时间: {{item.endTime}}
            </div>
            <div class="text item">
              折扣类型: {{item.discountType|discountTypeFilter}}
            </div>
            <div class="text item" v-if="item.discountType == 2">
                折扣价格: {{item.money}}
            </div>
            <div class="text item" v-if="item.discountType == 1">
                折扣百分比: {{item.discountPercent}}%
            </div>
            <div class="text item">
                状态 : <el-tag :type="item.status|statustagFilter">{{item.status|statusFilter}}</el-tag> 
            </div>
              <div class="bottom clearfix">
          <el-button type="text" style="float:right"  @click="manageGoods(item.id)" class="button">商品管理</el-button>
        </div>
          </el-card>
        </el-col>
      </el-row>

    </div>
    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible" width="900px">
      <el-form class="dialog-form" :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="120px">

        <el-form-item label="活动名称" prop="title">
          <el-input v-model="temp.title" placeholder="活动名称"></el-input>
        </el-form-item>


        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生效时间" prop="startTime">
              <el-date-picker v-model="temp.startTime"  value-format="yyyy-MM-dd HH:mm:ss" align="right" type="datetime" placeholder="选择生效时间"
                :picker-options="pickerOptions1">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item label="失效时间" prop="endTime">

              <el-date-picker v-model="temp.endTime" value-format="yyyy-MM-dd HH:mm:ss" align="right" type="datetime" placeholder="选择失效时间"
                :picker-options="pickerOptions1">
              </el-date-picker>


            </el-form-item>

          </el-col>
        </el-row>

         <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="折扣类型" prop="discountType">
                <el-select v-model="temp.discountType" placeholder="请选择">
    <el-option
      v-for="item in discountOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item label="折扣百分比" prop="discountPercent" v-if="temp.discountType==1">

                <el-input type="number" v-model="temp.discountPercent" placeholder="比如80" style="width:100px;"></el-input>
               %
            </el-form-item>

            <el-form-item label="统一价" prop="money" v-if="temp.discountType==2">

                <el-input type="number" v-model="temp.money" placeholder="请输入价格" style="width:100px;"></el-input>
            </el-form-item>

          </el-col>
        </el-row>


        <el-form-item label="发布状态" prop="status">

          <el-radio-group v-model="temp.status">
            <el-radio v-for="(item,value) in statusFilter" :key="value" :label="value" :value="value">{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>






      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
    </div>
    
    <router-view></router-view>
  </div>

</template>

<script>
let statusFilter = ["上线", "下线"];
let statustagFilter = ["success", "danger", "info", "warning"];
let discountOptions = [{
  value:1,
  label:'打折'
},{
  value:2,
  label:'统一价'
}];
export default {
  watch: {
    $route() {
      if (this.$route.name == "goods.special_center.manage") {
        this.isManage = true;
      } else {
        this.isManage = false;
      }
    }
  },
  created() {
    if (this.$route.name == "goods.special_center.manage") {
      this.isManage = true;
    } else {
      this.isManage = false;
    }
    this.init("goods_activity", 1).loadData();
  },
  filters: {
    statusFilter(status) {
      return statusFilter[parseInt(status)];
    },
    statustagFilter(status) {
      return statustagFilter[parseInt(status)];
    },
    discountTypeFilter(v){
      let rt;
      discountOptions.forEach(el=>{
        if(el.value == v){
          rt = el.label;
        }
      });
      return rt;
    }
  },
  methods: {
    manageGoods(id) {
      this.$router.push("/goods/special/manage?id=" + id);
    }
  },

  data() {
    return {
      isManage: false,
      discountOptions,
      dialogFormVisible: false,
      temp: {
        id: "",
        title: "",
        startTime: "",
        discountType:'',
        money:'',
        discountPercent:'',
        endTime: "",
        status
      },
      statusFilter: statusFilter,
      pickerOptions1: {
        //   disabledDate(time) {
        //     return time.getTime() > Date.now();
        //   },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      rules: {
        title: [
          {
            required: true,
            message: "特价活动名称不能为空",
            trigger: "change"
          },
          {
            max: 50,
            message: "特价活动名称不能大于50个字",
            trigger: "change"
          }
        ],

        startTime: [
          {
            required: true,
            message: "生效时间不能为空",
            trigger: "change"
          }
        ],

        endTime: [
          {
            required: true,
            message: "失效时间不能为空",
            trigger: "change"
          }
        ],
         discountType: [
          {
            required: true,
            message: "折扣类型必须指定",
            trigger: "change"
          }
        ],

        discountPercent: [
          {
            required: true,
            message: "折扣比例必须指定",
            trigger: "change"
          }
        ],
        money: [
          {
            required: true,
            message: "统一价必须指定",
            trigger: "change"
          }
        ],

        status: [
          {
            required: true,
            message: "请选中发布状态",
            trigger: "change"
          }
        ]
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.item {
  line-height: 2.5em;
}
</style>
